<template>
  <div style="object-fit: fill;">
    <div style="object-fit: fill;">
      <video :width="width" :height="height" :style="{borderRadius: '10px'}" :src="propValue.url" type="video/mp4" style="background-color: black;" autoplay>
        <!-- <source src="http://139.9.5.249:7777/MP4/tx1.mp4" type="video/mp4"> -->
      </video>
    </div>
  </div>
</template>

<script>
import OnEvent from '../common/OnEvent'
export default {
  extends: OnEvent,
  name: '',
  props: {
    propValue: {
      type: Object,
      required: true,
      default: () => { },
    },
    element: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      width: 0,
      height: 0,
    }
  },
  components: {

  },
  computed: {

  },
  watch: {
    'element.style.width': function () {
      this.drawVideo()
    },
    'element.style.height': function () {
      this.drawVideo()
    },
    'propValue.flip.vertical': function () {
      this.drawVideo()
    },
    'propValue.flip.horizontal': function () {
      this.drawVideo()
    },
  },
  created() {

  },
  mounted() {
    this.drawVideo()
  },
  methods: {
    drawVideo() {
      const { width, height } = this.element.style
      // console.log(this.element.style)
      this.width = width
      this.height = height
    }
  },
}
</script>

<style scoped></style>
